<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=640 , user-scalable=no">
    <title>Document</title>
    <script type="text/javascript" src="js/startMove.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        ul{ width:500px; margin:100px auto;}
        li{ list-style: none; float: left; margin:10px;}
        li div{ width:100px; height:100px; background-color: #f90;}
        input{ margin-top: 500px;}
        #list div{ width:100px; height:100px; text-align: center; line-height: 100px; position: absolute; z-index: 10000; background-color: #000; color:#fff;}
    </style>
</head>
<body>
    <ul id="ul1">
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
        <li>
            <div>8</div>
        </li>
        <li>
            <div>9</div>
        </li>
        <li>
            <div>10</div>
        </li>
        <li>
            <div>11</div>
        </li>
        <li>
            <div>12</div>
        </li>
        <li>
            <div>13</div>
        </li>
        <li>
            <div>14</div>
        </li>
        <li>
            <div>15</div>
        </li>
        <li>
            <div>16</div>
        </li>
    </ul>
    <input type="button" value="乱序" id="input1"/>
    <div id="list"></div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName("li");
        var oInput = document.getElementById('input1');
        var arr = [];
        var izIndex = 2;
        for( var i = 0; i < aLi.length; i++){  //获取盒子的位置并存放到数组arr里
            arr.push([aLi[i].offsetLeft , aLi[i].offsetTop]);
        }
        console.log(arr);
        for( var i = 0; i< aLi.length; i++){  //将浮动改为绝对定位，并正确赋值位置数值，并清除margin
            aLi[i].style.position = 'absolute';
            aLi[i].style.left = arr[i][0] + 'px';
            aLi[i].style.top = arr[i][1] + 'px';
            aLi[i].style.margin = 0;
        }
        for( var i = 0; i< aLi.length; i++){   //给盒子赋值index，便于运动。执行移动函数
            aLi[i].index = i;
            drag(aLi[i]);
        }
        oInput.onclick = function(){    //随机排序，通过数组的随机排序来排列图片，并重新赋值index
            var randomArr = [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
            randomArr.sort(function(n1,n2){
                return Math.random() - 0.5;
            })
            for( var i = 0; i < aLi.length ; i++){
                startMove(aLi[i] , {left : arr[randomArr[i]][0],top : arr[randomArr[i]][1]});
                aLi[i].index = randomArr[i];
            }
        }
        $('li').click(function(event) {
            var index = $(this).index();
            var L = arr[index][0];
            var T = arr[index][1];
            console.log(L,T)
            // $('#list').append('<div data-id="'+index+'" style="left:'+L+'px; top:'+T+'px;">第'+index+'个</div>')
            $('<div data-id="'+index+'" style="left:'+L+'px; top:'+T+'px;">第'+index+'个</div>').appendTo($('#list'))
        });

        $('#list').on('click','div',function(){
            var index = $(this).attr('data-id');
            console.log(index);
        })
        function drag(obj){    //图片移动函数
            var disX = 0;
            var disY = 0;
            /*obj.onmousedown = function(ev){     //鼠标点下获取鼠标和图片的相对位置
                obj.style.zIndex = izIndex++;
                var ev = ev || window.event;
                disX = ev.clientX - obj.offsetLeft;
                disY = ev.clientY - obj.offsetTop;
                document.onmousemove = function(ev){ 
//鼠标移动，移动盒子的同时，更改临近盒子的边框
                    var ev = ev || window.event;
                    obj.style.left = ev.clientX - disX + 'px';
                    obj.style.top = ev.clientY - disY + 'px';
                    for( var i=0 ;i<aLi.length; i++){
                        aLi[i].style.border = '';
                    }
                    var nL = nearLi(obj); //获取临近盒子更改边框
                    if(nL){
                        nL.style.border = '2px solid red';
                    }
                }
                document.onmouseup = function(){ 
//鼠标弹起，如有临近盒子，就交换位置并更换index，如无临近盒子，则返回原位
                    document.onmousemove = null;
                    document.onmouseup = null;
                    
                    var nL = nearLi(obj);
                    var tmp = 0;
                    if(nL){
                        startMove( nL , {left : arr[obj.index][0],top : arr[obj.index][1]});
                        startMove( obj , {left : arr[nL.index][0],top : arr[nL.index][1]});
                        tmp = obj.index;
                        obj.index = nL.index;
                        nL.index = tmp;
                        nL.style.border = '';
                    }else{
                        startMove( obj , {left : arr[obj.index][0],top : arr[obj.index][1]});
                    }
                }
                return false;
            }*/
            obj.addEventListener('touchstart',function(e){
                obj.style.zIndex = izIndex++;
                var touch = e.changedTouches[0];
                disX = touch.pageX - obj.offsetLeft;
                disY = touch.pageY - obj.offsetTop;
            });
            obj.addEventListener('touchmove',function(e){
                var touch = e.changedTouches[0];  //当前手指，可以先输出e，看下结构
                obj.style.left = touch.pageX - disX + 'px';
                obj.style.top = touch.pageY - disY + 'px';
                for( var i=0 ;i<aLi.length; i++){
                    aLi[i].style.border = '';
                }
                var nL = nearLi(obj); //获取临近盒子更改边框
                if(nL){
                    nL.style.border = '2px solid red';
                }
            });
            obj.addEventListener('touchend',function(e){
                obj.onmousemove = null;
                obj.onmouseup = null;
                
                var nL = nearLi(obj);
                var tmp = 0;
                if(nL){
                    startMove( nL , {left : arr[obj.index][0],top : arr[obj.index][1]});
                    startMove( obj , {left : arr[nL.index][0],top : arr[nL.index][1]});
                    tmp = obj.index;
                    obj.index = nL.index;
                    nL.index = tmp;
                    nL.style.border = '';
                }else{
                    startMove( obj , {left : arr[obj.index][0],top : arr[obj.index][1]});
                }
            });
        }
        function pz(obj1,obj2){ //是否碰撞，返回真或假
            var L1 = obj1.offsetLeft;
            var R1 = obj1.offsetLeft + obj1.offsetWidth;
            var T1 = obj1.offsetTop;
            var B1 = obj1.offsetTop + obj1.offsetHeight;
            var L2 = obj2.offsetLeft;
            var R2 = obj2.offsetLeft + obj2.offsetWidth;
            var T2 = obj2.offsetTop;
            var B2 = obj2.offsetTop + obj2.offsetHeight;
            if( R1<L2 || L1>R2 || B1<T2 || T1>B2){
                return false;
            }else{
                return true;
            }
        }
        function nearLi(obj){  //判断最临近图片，并返回此图片
            var value = 9999;
            var index = -1;
            for( var i = 0; i<aLi.length ; i++){   
                if(pz(obj,aLi[i]) && obj != aLi[i]){  //如果有碰撞，就计算距离
                    var c = jl(obj,aLi[i]);
                    if( c < value){  //通过这种方式循环，可以获得最小值c，从而获取index
                        value = c;
                        index = i;
                    }
                }
            }
            if( index != -1){
                return aLi[index];
            }else{
                return false;
            }
        }
        function jl(obj1,obj2){   //计算两个盒子的距离，以左上角为基准来计算
            var a = obj1.offsetLeft - obj2.offsetLeft;
            var b = obj1.offsetTop - obj2.offsetTop;
            return Math.sqrt(a*a + b*b);
        }
    }
</script>